<!DOCTYPE html>
<html onselectstart='return false'>
<head>
	<meta charset="UTF-8">
	<meta name="Author" content="FengYu">
	<title>潭州教育</title>
	<style>
		*{margin:0;padding:0;font-family: Microsoft YaHei,serif;}
		li{list-style: none;}

		body, input, select, button, h1 {
			font-size: 28px;
			line-height:1.7;
		}
</style>	
</head>

<body>

<h1>员工查询</h1>

<label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p>

<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>

	<script>
		search.onclick = function (){

			var XHR = new XMLHttpRequest();
			XHR.open('GET','server.php?number='+keyword.value );
			XHR.send();
			XHR.onreadystatechange = function(){
				(XHR.readyState === 4)&&(XHR.status===200?searchResult.innerHTML=XHR.responseText:alert('发生错误'+XHR.status));
			}


		}
		/*save.onclick = function () {
			var Xhr = new XMLHttpRequest();
			Xhr.open('GET','server.php?name='+staffName.value+"&number="+staffNumber.value+"&sex="+staffSex.value+"&job="+staffJob.value)
			Xhr.send();
			Xhr.onreadystatechange = function () {
				if(Xhr.readyState===4){
				    if(Xhr.status===200){
                        createResult.innerHTML = Xhr.responseText;
				    }else{
				        alert("发生错误"+Xhr.status)
					}
				}
            }
        }*/



		save.onclick = function(){
			var XHR =new XMLHttpRequest();
			XHR.open("POST",'server.php');

			var data = "name="+ staffName.value + "&number=" + staffNumber.value + "&sex=" + staffSex.value + "&job="+ staffJob.value;

			XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			XHR.send(data);

			XHR.onreadystatechange = function(){
				if (XHR.readyState===4) {
					if (XHR.status===200) {
					console.log(1)
						createResult.innerHTML = XHR.responseText;
					}else {
						alert("发生错误"+XHR.status)
					}
				}
			}
		}



	</script>
</body>
</html>